<template>
	<div class="login-form">
		<div class="login-form__title">
			<w-icon type="app-logo" width="40px" height="40px"></w-icon>
			<h2 class="login-form__title-text">MES管理平台</h2>
		</div>
		<div class="login-form__block ">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
				<el-tabs v-model="loginType" :stretch="true">
					<!-- <el-form-item prop="username" class="form-item-user">
						<el-input
							v-model="ruleForm.depname"
							placeholder="请输入域名"
							size="medium"
							@keyup.enter.native="onCellInputEnter(arguments, 'loginPassword')"
						>
							<w-icon slot='prefix' class="el-input__icon" type="login-depName" size="middle"></w-icon>
						</el-input>
					</el-form-item> -->
					<el-form-item prop="userName" class="form-item-user">
						<el-input
							v-model="ruleForm.userName"
							placeholder="请输入用户名"
							size="medium"
							@keyup.enter.native="onCellInputEnter(arguments, 'loginPassword')"
						>
							<w-icon slot='prefix' class="el-input__icon" type="login-account" size="middle"></w-icon>
						</el-input>
					</el-form-item>
				</el-tabs>
				<el-form-item prop="passWord" class="form-item-password">
					<w-input
						ref="loginPassword"
						v-model="ruleForm.passWord"
						placeholder="请输入密码"
						size="medium"
						iconType='login-passWord'
						prefix-icon="login-passWord"
						:maxlength='100'
						:regType="$fxCommon.getFxInputReg('commonCode')"
						:showPassword='true'
						@keyup.enter.native="onCellInputEnter(arguments, 'VerifyCode')"
					>
					</w-input>
				</el-form-item>
				<fx-detials-form-row>
					<el-form-item slot="left" prop="verificationCode">
						<el-input
							ref="VerifyCode"
							v-model="ruleForm.verificationCode"
							placeholder="请输入验证码"
							size="medium"
							@keyup.enter.native="onCellInputEnter(arguments, 'submit')"
						>
							<w-icon slot='prefix' class="el-input__icon" type="login-checkCode" size="middle"></w-icon>
						</el-input>
					</el-form-item>
					<el-form-item slot="right" prop="name">
						<el-tooltip effect="dark" content="点击刷新" placement="right-start">
							<img :src="'data:image/png;base64,'+authCodeImgUrl" class="auth-code-img fx-cursor" @click="onimageClick">
						</el-tooltip>
					</el-form-item>
				</fx-detials-form-row>
			</el-form>
			<el-button type="primary" size="medium" class="login-confirm" @click="onLoginClick('ruleForm')">登录</el-button>
		</div>
	</div>
</template>

<script>
export default {
	name: 'LoginForm',
	data () {
		const validateHandler = (rule, value, callback) => {
			if (!value) {
				callback(new Error(rule.message))
			} else {
				callback()
			}
		}
		return {
			ruleForm: {
				userName: '',
				passWord: '',
				verificationCode: ''
			},
			rules: {
				userName: [{ message: '请输入用户名', validator: this.validateUserName, trigger: 'change' }],
				passWord: [{ message: '请输入密码', validator: validateHandler, trigger: 'change' }],
				verificationCode: [{ message: '请输入验证码', validator: validateHandler, trigger: 'change' }]
			},
			loginType: 'username',
			authCodeImgUrl: '',
			verificationId: ''
		}
	},
	// computed: {
	// 	authCodeImgUrl () {
	// 		return this.$fxApi('auth.login').then(res => {
	// 			return res.image
	// 		})
	// 	}
	// },
	created () {
		this.getVerificationCode()
	},
	methods: {
		getVerificationCode () {
			this.$fxApi('auth.getKaptcha').then(res => {
				this.authCodeImgUrl = res.image
				this.verificationId = res.id
			})
		},
		onLoginClick (ruleForm) {
			this.$refs[ruleForm].validate().then((valid) => {
				this.$emit('on-login', {
					...this.ruleForm,
					verificationCodeId: this.verificationId
				})
				// this.$router.push('main')
			})
		},
		onCellInputEnter (arg, prop) {
			if (prop === 'submit') {
				this.onLoginClick('ruleForm')
			} else {
				this.$refs[prop].focus()
			}
		},
		onimageClick () {
			this.getVerificationCode()
		},
		validateUserName (rule, value, callback) {
			if (!value && this.loginType === 'username') {
				callback(new Error(rule.message))
			} else {
				callback()
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.login-form .el-input__icon {
	margin-top: 8px;
}
.login-form {
	display: flex;
	flex-direction: column;
	width: 425px
	height: 520px
	&__title {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 80px
		&-text {
			font-size: 20px
			font-weight: 900
			margin-left:20px;
			color: white;
		}
	}
	&__block {
		flex:1
		display:flex
		flex-direction: column;
		padding: 40px 40px;
		background-color: white;
		&-link {
			height:30px
			font-size: 14px
			color: $fxDefaultColor
			margin-bottom:30px
			display:flex
			flex-direction: row
			justify-content: flex-end
		}
		.form-item-user, .form-item-password {
			padding-bottom: 20px
		}
		.auth-code-img {
			height: 36px
			width: 170px
		}
		.login-confirm {
			margin-top: 20px
		}
		.input-icon {
			position: relative;
			top: 2px;
		}
		.backgroundImg {
			background-size:100% 100%;
		}
	}
}
</style>


